<template>
  <div class="content-grade-details" style="width:96%; margin:0 auto">
    <div class="header">
      <el-row class="left">
        <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="reload"
          >刷新</el-button
        >
        <el-button type="primary" size="small" icon="el-icon-d-arrow-left" @click="back"
          >返回</el-button
        >
      </el-row>
      <div class="right">
        <el-button
          class="btn"
          type="primary"
          size="small"
          icon="el-icon-sort"
          @click="isSort = true"
          >排序</el-button>
      </div>
    </div>

    <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="序号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="province"
      label="单选题成绩"
      width="150">
    </el-table-column>
    <el-table-column
      prop="city"
      label="多选题成绩"
      width="200">
    </el-table-column>
    <el-table-column
      prop="address"
      label="判断题成绩"
      width="200">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="总成绩"
      width="200">
    </el-table-column>
    <el-table-column
      prop="level"
      label="等级"
      width="200">
      <template slot-scope="scope">
        <span :style="discolor(scope.row.level)">{{ scope.row.level }}</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="400">
      <template >
        <el-button type="success" size="medium" plain @click="lookscoredetail">详情</el-button>

      </template>
    </el-table-column>
  </el-table>
  <div class="footer">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
   <!-- 排序弹窗 -->
   <!-- <el-dialog :visible.sync="isSort" title="排序" height="auto" width="380px" center>
    <h3>选择排序类型:</h3>
    <el-radio-group v-model="sort">
      <div style="margin-bottom: 10px">
        <el-radio label="0">根据总成绩升序排序</el-radio>
      </div>
      <div>
        <el-radio label="1">根据总成绩降序排序</el-radio>
      </div>
    </el-radio-group>
    <div>
      <el-button type="primary" size="small" plain @click="isSort = false" class="exit-sort"
        >取消</el-button
      >
      <el-button type="primary" size="small" plain @click="onSort">确认</el-button>
    </div>
  </el-dialog> -->
  </div>
  


</template>

<script>
export default {
name:'ScoremDetails',


    data() {
      return {
        currentPage: 1, // 当前页码
        pageSize: 4 ,  // 每页的数据条数
        tableData: [{
          date: 1,
          name: '张三',
          province: '20',
          city: '20',
          address: '20',
          zip: '60',
          level:'差',
        },{
          date: 2,
          name: '王二',
          province: '20',
          city: '10',
          address: '10',
          zip: '40',
          level:'良',
        },{
          date: 3,
          name: '李四',
          province: '20',
          city: '20',
          address: '10',
          zip: '50',
          level:'中',
        },{
          date: 4,
          name: '金莲',
          province: '100',
          city: '100',
          address: '100',
          zip: '300',
          level:'优秀',
        },],
      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      reload() {
 this.$router.go(0);
 },
 back() {
      this.$router.push("/scoremanagement");
    },
    lookscoredetail(){
        this.$router.push('/detail')
      },
      handleSizeChange(val) {
   console.log(`每页 ${val} 条`);
 this.currentPage = 1;
 this.pageSize = val;
 },
 handleCurrentChange(val) {
 console.log(`当前页: ${val}`);
this.currentPage = val;
 },
 //排序
 async onSort() {
      // const res = await gradeDetialSort({ id: this.sort });
      // console.log(res);
      // this.$nextTick(() => {
      //   this.tableData = res;
      //   this.total = total;
      // });
      this.isSort = false;
    },
  },

    //设置不同的等级颜色
  computed: {
    discolor(level) {
      return (level) => {
        if (level === "优秀") {
          return { color: "#009900" };
        } else if (level === "良") {
          return { color: "#edc779" };
        } else if (level === "中") {
          return { color: "blue" };
        } else {
          return { color: "red" };
        }
      };
    }
  
  }


  }

</script>

<style lang="scss" scoped>
    .left {
      float: left;
      margin-top: 12px;
    }
    .right {
      width: 80%;
      float: right;
      margin-top: 12px;
    }
      .btn {
        float: right;
        margin-left: 1%;

      }
</style>